<template>
  <div class="admin-dashboard">
    <div class="admin-header">
      <h1>动物乐园后台管理系统</h1>
      <div class="header-actions">
        <span class="welcome-text">欢迎管理员</span>
        <button @click="logout" class="logout-btn">退出登录</button>
      </div>
    </div>
    
    <div class="admin-layout">
      <aside class="sidebar">
        <nav class="admin-nav">
          <ul>
            <li>
              <router-link to="/admin/dashboard" class="nav-item" active-class="active">
                <span class="nav-icon">📊</span>
                <span class="nav-text">仪表盘</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/animals" class="nav-item" active-class="active">
                <span class="nav-icon">🐾</span>
                <span class="nav-text">动物管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/categories" class="nav-item" active-class="active">
                <span class="nav-icon">📂</span>
                <span class="nav-text">分类管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/users" class="nav-item" active-class="active">
                <span class="nav-icon">👥</span>
                <span class="nav-text">用户管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/memberships" class="nav-item" active-class="active">
                <span class="nav-icon">💎</span>
                <span class="nav-text">会员管理</span>
              </router-link>
            </li>
            <li>
              <router-link to="/admin/comments" class="nav-item" active-class="active">
                <span class="nav-icon">💬</span>
                <span class="nav-text">评论管理</span>
              </router-link>
            </li>
          </ul>
        </nav>
      </aside>
      
      <main class="main-content">
        <div class="page-header">
          <h2>评论管理</h2>
          <div class="header-actions">
            <button 
              @click="deleteSelectedComments" 
              class="delete-btn" 
              :disabled="selectedComments.length === 0"
            >
              <span>🗑️</span> 删除选中 ({{ selectedComments.length }})
            </button>
          </div>
        </div>
        
        <div class="stats-overview">
          <div class="stat-card">
            <div class="stat-icon">💬</div>
            <div class="stat-content">
              <h3>总评论数</h3>
              <p class="stat-number">{{ totalCommentsCount }}</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">👍</div>
            <div class="stat-content">
              <h3>今日新增</h3>
              <p class="stat-number">{{ todayCommentsCount }}</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">⚠️</div>
            <div class="stat-content">
              <h3>待审核</h3>
              <p class="stat-number">{{ pendingCommentsCount }}</p>
            </div>
          </div>
          <div class="stat-card">
            <div class="stat-icon">🚫</div>
            <div class="stat-content">
              <h3>已删除</h3>
              <p class="stat-number">{{ deletedCommentsCount }}</p>
            </div>
          </div>
        </div>
        
        <div class="search-filter-section">
          <div class="search-bar">
            <input 
              v-model="searchQuery" 
              type="text" 
              placeholder="搜索评论内容、用户名或动物名称..."
              class="search-input"
            />
          </div>
          
          <div class="filter-options">
            <div class="filter-group">
              <label>状态筛选：</label>
              <select v-model="statusFilter" class="filter-select">
                <option value="">全部状态</option>
                <option value="approved">已审核</option>
                <option value="pending">待审核</option>
                <option value="deleted">已删除</option>
              </select>
            </div>
            
            <div class="filter-group">
              <label>评分筛选：</label>
              <select v-model="ratingFilter" class="filter-select">
                <option value="">全部评分</option>
                <option value="5">5星</option>
                <option value="4">4星</option>
                <option value="3">3星</option>
                <option value="2">2星</option>
                <option value="1">1星</option>
              </select>
            </div>
            
            <div class="filter-group">
              <label>日期范围：</label>
              <input 
                v-model="dateRange.start" 
                type="date" 
                class="date-input"
              />
              <span>至</span>
              <input 
                v-model="dateRange.end" 
                type="date" 
                class="date-input"
              />
            </div>
          </div>
        </div>
        
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>
                  <input 
                    type="checkbox" 
                    v-model="selectAllComments" 
                    @change="toggleSelectAll"
                  />
                </th>
                <th>评论内容</th>
                <th>用户</th>
                <th>动物</th>
                <th>评分</th>
                <th>评论时间</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="comment in filteredComments" :key="comment.id">
                <td>
                  <input 
                    type="checkbox" 
                    v-model="selectedComments" 
                    :value="comment.id"
                    :disabled="comment.status === 'deleted'"
                  />
                </td>
                <td class="comment-content">
                  <p>{{ comment.content }}</p>
                  <div v-if="comment.reply" class="comment-reply">
                    <span class="reply-label">管理员回复：</span>
                    <p>{{ comment.reply.content }}</p>
                    <span class="reply-time">{{ formatDate(comment.reply.createdAt) }}</span>
                  </div>
                </td>
                <td>
                  <div class="user-info">
                    <div class="user-avatar">{{ getUserName(comment.userId).charAt(0).toUpperCase() }}</div>
                    <span>{{ getUserName(comment.userId) }}</span>
                  </div>
                </td>
                <td>
                  <div class="animal-info">
                    <div 
                      class="animal-image"
                      :style="{backgroundImage: `url(${getAnimalImage(comment.animalId)})`}"
                    ></div>
                    <span>{{ getAnimalName(comment.animalId) }}</span>
                  </div>
                </td>
                <td>
                  <div class="rating">
                    <span v-for="star in 5" :key="star" :class="['star', { filled: star <= comment.rating }]">
                      ★
                    </span>
                  </div>
                </td>
                <td>{{ formatDate(comment.createdAt) }}</td>
                <td>
                  <span :class="`status-badge ${comment.status}`">
                    {{ getStatusText(comment.status) }}
                  </span>
                </td>
                <td>
                  <div class="action-buttons">
                    <button 
                      @click="replyToComment(comment)" 
                      class="reply-btn"
                      :disabled="comment.status !== 'approved'"
                    >
                      回复
                    </button>
                    <button 
                      @click="approveComment(comment.id)" 
                      class="approve-btn"
                      v-if="comment.status === 'pending'"
                    >
                      审核
                    </button>
                    <button 
                      @click="deleteComment(comment.id)" 
                      class="delete-btn"
                      :disabled="comment.status === 'deleted'"
                    >
                      {{ comment.status === 'deleted' ? '已删除' : '删除' }}
                    </button>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          
          <div v-if="filteredComments.length === 0" class="empty-state">
            <div class="empty-icon">📝</div>
            <p>暂无评论数据</p>
          </div>
        </div>
        
        <div class="pagination">
          <button 
            @click="currentPage--" 
            :disabled="currentPage === 1"
            class="pagination-btn"
          >
            上一页
          </button>
          <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
          <button 
            @click="currentPage++" 
            :disabled="currentPage === totalPages"
            class="pagination-btn"
          >
            下一页
          </button>
        </div>
        
        <!-- 回复评论模态框 -->
        <div v-if="showReplyModal" class="modal-overlay" @click="closeReplyModal">
          <div class="modal-content" @click.stop>
            <div class="modal-header">
              <h3>回复评论</h3>
              <button @click="closeReplyModal" class="close-btn">×</button>
            </div>
            <div class="modal-body">
              <div class="comment-preview">
                <h4>用户评论：</h4>
                <p>{{ currentComment?.content }}</p>
              </div>
              <form @submit.prevent="submitReply">
                <div class="form-group">
                  <label for="replyContent">回复内容：</label>
                  <textarea 
                    id="replyContent" 
                    v-model="replyForm.content"
                    rows="4"
                    required
                    class="form-input"
                  ></textarea>
                </div>
                <div class="form-actions">
                  <button type="button" @click="closeReplyModal" class="cancel-btn">取消</button>
                  <button type="submit" class="submit-btn">发送回复</button>
                </div>
              </form>
            </div>
          </div>
        </div>
        
        <!-- 评论详情模态框 -->
        <div v-if="showDetailModal" class="modal-overlay" @click="closeDetailModal">
          <div class="modal-content large" @click.stop>
            <div class="modal-header">
              <h3>评论详情</h3>
              <button @click="closeDetailModal" class="close-btn">×</button>
            </div>
            <div class="modal-body">
              <div class="detail-section">
                <h4>评论信息</h4>
                <div class="detail-grid">
                  <div class="detail-item">
                    <label>评论ID：</label>
                    <span>{{ currentComment?.id }}</span>
                  </div>
                  <div class="detail-item">
                    <label>用户：</label>
                    <span>{{ getUserName(currentComment?.userId) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>动物：</label>
                    <span>{{ getAnimalName(currentComment?.animalId) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>评分：</label>
                    <div class="rating">
                      <span v-for="star in 5" :key="star" :class="['star', { filled: star <= currentComment?.rating }]">
                        ★
                      </span>
                    </div>
                  </div>
                  <div class="detail-item">
                    <label>评论时间：</label>
                    <span>{{ formatDate(currentComment?.createdAt) }}</span>
                  </div>
                  <div class="detail-item">
                    <label>状态：</label>
                    <span :class="`status-badge ${currentComment?.status}`">
                      {{ getStatusText(currentComment?.status) }}
                    </span>
                  </div>
                </div>
              </div>
              
              <div class="detail-section">
                <h4>评论内容</h4>
                <div class="comment-content-full">
                  <p>{{ currentComment?.content }}</p>
                </div>
              </div>
              
              <div v-if="currentComment?.reply" class="detail-section">
                <h4>管理员回复</h4>
                <div class="reply-content">
                  <p>{{ currentComment.reply.content }}</p>
                  <span class="reply-time">{{ formatDate(currentComment.reply.createdAt) }}</span>
                </div>
              </div>
              
              <div class="modal-footer">
                <button type="button" @click="closeDetailModal" class="cancel-btn">关闭</button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommentManagementView',
  data() {
    return {
      // 评论数据
      comments: [],
      users: [],
      animals: [],
      
      // 搜索和筛选
      searchQuery: '',
      statusFilter: '',
      ratingFilter: '',
      dateRange: {
        start: '',
        end: ''
      },
      
      // 分页
      currentPage: 1,
      itemsPerPage: 10,
      
      // 选中的评论
      selectedComments: [],
      selectAllComments: false,
      
      // 模态框控制
      showReplyModal: false,
      showDetailModal: false,
      currentComment: null,
      
      // 回复表单
      replyForm: {
        content: ''
      }
    }
  },
  computed: {
    // 计算统计数据
    totalCommentsCount() {
      return this.comments.length
    },
    todayCommentsCount() {
      const today = new Date().toDateString()
      return this.comments.filter(c => new Date(c.createdAt).toDateString() === today).length
    },
    pendingCommentsCount() {
      return this.comments.filter(c => c.status === 'pending').length
    },
    deletedCommentsCount() {
      return this.comments.filter(c => c.status === 'deleted').length
    },
    
    // 过滤后的评论
    filteredComments() {
      let result = [...this.comments]
      
      // 状态过滤
      if (this.statusFilter) {
        result = result.filter(comment => comment.status === this.statusFilter)
      }
      
      // 评分过滤
      if (this.ratingFilter) {
        result = result.filter(comment => comment.rating === parseInt(this.ratingFilter))
      }
      
      // 日期范围过滤
      if (this.dateRange.start) {
        result = result.filter(comment => new Date(comment.createdAt) >= new Date(this.dateRange.start))
      }
      if (this.dateRange.end) {
        result = result.filter(comment => new Date(comment.createdAt) <= new Date(this.dateRange.end))
      }
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(comment => 
          comment.content.toLowerCase().includes(query) ||
          getUserName(comment.userId).toLowerCase().includes(query) ||
          getAnimalName(comment.animalId).toLowerCase().includes(query)
        )
      }
      
      // 按时间倒序排序
      result.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
      
      // 分页
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return result.slice(start, end)
    },
    
    // 总页数
    totalPages() {
      let result = [...this.comments]
      
      // 应用相同的过滤条件
      if (this.statusFilter) {
        result = result.filter(comment => comment.status === this.statusFilter)
      }
      if (this.ratingFilter) {
        result = result.filter(comment => comment.rating === parseInt(this.ratingFilter))
      }
      if (this.dateRange.start) {
        result = result.filter(comment => new Date(comment.createdAt) >= new Date(this.dateRange.start))
      }
      if (this.dateRange.end) {
        result = result.filter(comment => new Date(comment.createdAt) <= new Date(this.dateRange.end))
      }
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(comment => 
          comment.content.toLowerCase().includes(query) ||
          getUserName(comment.userId).toLowerCase().includes(query) ||
          getAnimalName(comment.animalId).toLowerCase().includes(query)
        )
      }
      
      return Math.ceil(result.length / this.itemsPerPage)
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取模拟数据
    fetchData() {
      // 模拟用户数据
      this.users = [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
        { id: 3, name: '王五' },
        { id: 4, name: '赵六' },
        { id: 5, name: '钱七' }
      ]
      
      // 模拟动物数据
      this.animals = [
        { id: 1, name: '狮子', imageUrl: 'https://picsum.photos/seed/lion/100' },
        { id: 2, name: '老虎', imageUrl: 'https://picsum.photos/seed/tiger/100' },
        { id: 3, name: '大象', imageUrl: 'https://picsum.photos/seed/elephant/100' },
        { id: 4, name: '长颈鹿', imageUrl: 'https://picsum.photos/seed/giraffe/100' },
        { id: 5, name: '猴子', imageUrl: 'https://picsum.photos/seed/monkey/100' }
      ]
      
      // 模拟评论数据
      const today = new Date()
      const yesterday = new Date(today)
      yesterday.setDate(yesterday.getDate() - 1)
      
      this.comments = [
        {
          id: 1,
          userId: 1,
          animalId: 1,
          content: '狮子真的太威武了！在动物园看到它的时候，感觉整个园区都充满了王者的气息。希望能看到更多关于狮子的互动表演。',
          rating: 5,
          status: 'approved',
          createdAt: today.toISOString(),
          reply: {
            content: '感谢您的好评！我们每天上午10点和下午3点都有狮子喂食表演，欢迎您前来观看。',
            createdAt: today.toISOString()
          }
        },
        {
          id: 2,
          userId: 2,
          animalId: 2,
          content: '老虎看起来有点无精打采的，希望动物园能改善一下它们的生活环境，让它们更有活力。',
          rating: 3,
          status: 'approved',
          createdAt: yesterday.toISOString()
        },
        {
          id: 3,
          userId: 3,
          animalId: 3,
          content: '大象展区很棒，能近距离观察到它们的日常生活，管理员的讲解也很专业。',
          rating: 5,
          status: 'approved',
          createdAt: new Date(today.getTime() - 2 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 4,
          userId: 4,
          animalId: 4,
          content: '长颈鹿的脖子真的太长了，小朋友特别喜欢看它们吃树叶的样子。',
          rating: 4,
          status: 'pending',
          createdAt: new Date(today.getTime() - 3 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 5,
          userId: 5,
          animalId: 5,
          content: '猴子太调皮了，一直在爬来爬去，很有趣！',
          rating: 4,
          status: 'approved',
          createdAt: new Date(today.getTime() - 4 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 6,
          userId: 1,
          animalId: 2,
          content: '老虎园的玻璃有点脏，看不太清楚，希望能及时清洁。',
          rating: 2,
          status: 'approved',
          createdAt: new Date(today.getTime() - 5 * 24 * 60 * 60 * 1000).toISOString(),
          reply: {
            content: '非常抱歉给您带来不好的体验，我们会加强展区的清洁工作，感谢您的反馈！',
            createdAt: new Date(today.getTime() - 4.5 * 24 * 60 * 60 * 1000).toISOString()
          }
        },
        {
          id: 7,
          userId: 2,
          animalId: 3,
          content: '大象表演很精彩，特别是它们画画的环节，太神奇了！',
          rating: 5,
          status: 'approved',
          createdAt: new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 8,
          userId: 3,
          animalId: 1,
          content: '狮子看起来很健康，园区环境也很干净，点赞！',
          rating: 5,
          status: 'approved',
          createdAt: new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 9,
          userId: 4,
          animalId: 5,
          content: '猴子园的互动性很强，小朋友玩得很开心。',
          rating: 4,
          status: 'approved',
          createdAt: new Date(today.getTime() - 8 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 10,
          userId: 5,
          animalId: 4,
          content: '长颈鹿的喂食体验很棒，能亲手喂它们吃东西，很有趣！',
          rating: 5,
          status: 'approved',
          createdAt: new Date(today.getTime() - 9 * 24 * 60 * 60 * 1000).toISOString()
        },
        {
          id: 11,
          userId: 1,
          animalId: 2,
          content: '测试评论，应该被删除',
          rating: 1,
          status: 'deleted',
          createdAt: new Date(today.getTime() - 10 * 24 * 60 * 60 * 1000).toISOString()
        }
      ]
    },
    
    // 获取用户名
    getUserName(userId) {
      const user = this.users.find(u => u.id === userId)
      return user ? user.name : '未知用户'
    },
    
    // 获取动物名称
    getAnimalName(animalId) {
      const animal = this.animals.find(a => a.id === animalId)
      return animal ? animal.name : '未知动物'
    },
    
    // 获取动物图片
    getAnimalImage(animalId) {
      const animal = this.animals.find(a => a.id === animalId)
      return animal ? animal.imageUrl : 'https://picsum.photos/seed/default/100'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        approved: '已审核',
        pending: '待审核',
        deleted: '已删除'
      }
      return statusMap[status] || '未知'
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    },
    
    // 全选/取消全选
    toggleSelectAll() {
      if (this.selectAllComments) {
        // 选中所有未删除的评论
        this.selectedComments = this.comments
          .filter(c => c.status !== 'deleted')
          .map(c => c.id)
      } else {
        this.selectedComments = []
      }
    },
    
    // 审核评论
    approveComment(commentId) {
      const comment = this.comments.find(c => c.id === commentId)
      if (comment) {
        comment.status = 'approved'
        alert('评论审核通过！')
      }
    },
    
    // 删除评论
    deleteComment(commentId) {
      if (confirm('确定要删除这条评论吗？删除后将无法恢复。')) {
        const comment = this.comments.find(c => c.id === commentId)
        if (comment) {
          comment.status = 'deleted'
          // 从选中列表中移除
          this.selectedComments = this.selectedComments.filter(id => id !== commentId)
          alert('评论已删除！')
        }
      }
    },
    
    // 批量删除评论
    deleteSelectedComments() {
      if (this.selectedComments.length === 0) return
      
      if (confirm(`确定要删除选中的 ${this.selectedComments.length} 条评论吗？删除后将无法恢复。`)) {
        this.selectedComments.forEach(id => {
          const comment = this.comments.find(c => c.id === id)
          if (comment) {
            comment.status = 'deleted'
          }
        })
        this.selectedComments = []
        this.selectAllComments = false
        alert(`已删除 ${this.selectedComments.length} 条评论！`)
      }
    },
    
    // 回复评论
    replyToComment(comment) {
      this.currentComment = comment
      this.replyForm.content = ''
      this.showReplyModal = true
    },
    
    // 提交回复
    submitReply() {
      if (!this.replyForm.content.trim()) return
      
      if (this.currentComment) {
        this.currentComment.reply = {
          content: this.replyForm.content,
          createdAt: new Date().toISOString()
        }
        this.closeReplyModal()
        alert('回复成功！')
      }
    },
    
    // 查看评论详情
    viewCommentDetail(comment) {
      this.currentComment = comment
      this.showDetailModal = true
    },
    
    // 关闭回复模态框
    closeReplyModal() {
      this.showReplyModal = false
      this.currentComment = null
      this.replyForm.content = ''
    },
    
    // 关闭详情模态框
    closeDetailModal() {
      this.showDetailModal = false
      this.currentComment = null
    },
    
    // 退出登录
    logout() {
      localStorage.removeItem('user')
      this.$router.push('/login')
    }
  },
  watch: {
    // 监听选中的评论变化，更新全选状态
    selectedComments: {
      handler() {
        const activeComments = this.comments.filter(c => c.status !== 'deleted')
        this.selectAllComments = 
          activeComments.length > 0 && 
          this.selectedComments.length === activeComments.length
      },
      deep: true
    },
    
    // 监听筛选条件变化，重置页码
    statusFilter() {
      this.currentPage = 1
    },
    ratingFilter() {
      this.currentPage = 1
    },
    dateRange: {
      handler() {
        this.currentPage = 1
      },
      deep: true
    },
    searchQuery() {
      this.currentPage = 1
    }
  }
}
</script>

<style scoped>
/* 复用之前组件的大部分样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.stat-icon {
  font-size: 2rem;
}

.stat-content h3 {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.9rem;
  font-weight: normal;
}

.stat-number {
  margin: 0.5rem 0 0 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: #2c3e50;
}

.search-filter-section {
  background-color: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1.5rem;
}

.search-bar {
  margin-bottom: 1rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: 500;
  color: #2c3e50;
}

.filter-select {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.date-input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #2c3e50;
  white-space: nowrap;
}

.data-table tbody tr:hover {
  background-color: #f8f9fa;
}

.comment-content {
  max-width: 300px;
}

.comment-content p {
  margin: 0 0 0.5rem 0;
  word-break: break-word;
}

.comment-reply {
  background-color: #f8f9fa;
  padding: 0.75rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.reply-label {
  font-weight: 500;
  color: #3498db;
}

.reply-time {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: #7f8c8d;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 0.9rem;
}

.animal-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.animal-image {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: #f8f9fa;
}

.rating {
  display: inline-flex;
  gap: 0.25rem;
}

.star {
  color: #ddd;
  font-size: 1.2rem;
}

.star.filled {
  color: #f39c12;
}

.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
}

.status-badge.approved {
  background-color: #d4edda;
  color: #155724;
}

.status-badge.pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-badge.deleted {
  background-color: #f8d7da;
  color: #721c24;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.reply-btn,
.approve-btn,
.delete-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 0.2s;
}

.reply-btn {
  background-color: #3498db;
  color: white;
}

.reply-btn:hover:not(:disabled) {
  background-color: #2980b9;
}

.approve-btn {
  background-color: #28a745;
  color: white;
}

.approve-btn:hover {
  background-color: #218838;
}

.delete-btn {
  background-color: #e74c3c;
  color: white;
}

.delete-btn:hover:not(:disabled) {
  background-color: #c0392b;
}

.delete-btn:disabled,
.reply-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.empty-state {
  text-align: center;
  padding: 3rem;
  color: #7f8c8d;
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.pagination-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  background-color: #f8f9fa;
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-info {
  font-size: 1rem;
  color: #666;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modal-content.large {
  max-width: 800px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  color: #2c3e50;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: #f8f9fa;
}

.modal-body {
  padding: 1.5rem;
}

.comment-preview {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.comment-preview h4 {
  margin: 0 0 0.5rem 0;
  color: #2c3e50;
}

.comment-preview p {
  margin: 0;
  word-break: break-word;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #2c3e50;
}

.form-input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
  resize: vertical;
  min-height: 100px;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn,
.submit-btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.2s;
}

.cancel-btn {
  background-color: #6c757d;
  color: white;
}

.cancel-btn:hover {
  background-color: #5a6268;
}

.submit-btn {
  background-color: #28a745;
  color: white;
}

.submit-btn:hover {
  background-color: #218838;
}

/* 详情页面样式 */
.detail-section {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail-section h4 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.detail-item label {
  font-size: 0.9rem;
  color: #7f8c8d;
}

.comment-content-full p {
  white-space: pre-wrap;
  line-height: 1.6;
  margin: 0;
}

.reply-content {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
}

.reply-content p {
  margin: 0 0 0.5rem 0;
  white-space: pre-wrap;
  line-height: 1.6;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .stats-overview {
    grid-template-columns: 1fr 1fr;
  }
  
  .filter-options {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }
  
  .data-table th,
  .data-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.9rem;
  }
  
  .comment-content {
    max-width: 150px;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .modal-content.large {
    width: 95%;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
</style>